<template>
    <!-- 
        页面以 QS （勤瘦） 为主命名
        每个页面再根据页面内容，添加不同命名后续 （如登录页 - loading）
        页面内命名都以本页面主题为开头，加功能后缀 如：loading-confirm-btn
        本页面主题:mall
     -->
    <div class="QS-content-template QS-mall">
        <div class="foods_console">
            <el-button @click="addMall" class="foods_addFoods_btn" type="primary">添加</el-button>
        </div>
        <el-table
            class="mall_table"
            :data="tableData"
            style="width: 100%"
            max-height="410"
        >
            <el-table-column
                fixed
                prop="productName"
                label="商品名称"
                width="150">
            </el-table-column>
            <el-table-column
                prop="productDescription"
                label="商品描述"
                width="calc(20%)">
            </el-table-column>
            <el-table-column
                prop="productPrice"
                label="兑换商品所需积分"
                width="calc(15%)">
            </el-table-column>
            <el-table-column
                prop="productSoldNumer"
                label="热销数量"
                width="calc(15%)">
            </el-table-column>
            <el-table-column
                prop="productUnit"
                label="商品单位"
                width="calc(15%)">
            </el-table-column>
            <el-table-column
                fixed="right"
                label="操作"
                width="120">
                <template class="mall_console" slot-scope="scope">
                    <el-button
                        class="mall_console_btn el-icon-edit"
                        @click.native.prevent="editRow(scope.$index, tableData[scope.$index])"
                        type="text"
                    >
                    </el-button>
                    <el-button
                        class="mall_console_btn el-icon-delete"
                        @click.native.prevent="deleteRow(scope.$index, tableData[scope.$index])"
                        type="text"
                    >
                    </el-button>
                    
                </template>
            </el-table-column>
        </el-table>
        <div class="block block_pagenation">
            <!-- <span class="demonstration">直接前往</span> -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage"
                :page-size="10"
                layout="prev, pager, next, jumper"
                :total="Number(totalNum)">
            </el-pagination>
        </div>


        <el-dialog
            title="添加积分兑换商品"
            :visible.sync="dialogVisible"
            width="80%"
        >
            <div class="mall_add">
                <div class="makeFoods_label">
                    <span class="makeFoods_label_tip">商品名称</span>
                    <div class="makeFoods_input">
                        <el-input 
                            v-model="mallName"
                            placeholder="请输入商品名称"
                            clearable
                        ></el-input>
                    </div>
                </div>
                <div class="makeFoods_label">
                    <span class="makeFoods_label_tip">商品描述</span>
                    <div class="makeFoods_input">
                        <el-input 
                            v-model="mallDes"
                            placeholder="请输入商品描述"
                            clearable
                        ></el-input>
                    </div>
                </div>
                <div class="makeFoods_label">
                    <span class="makeFoods_label_tip">所需积分</span>
                    <div class="makeFoods_input">
                        <el-input 
                            v-model="mallIntegral"
                            placeholder="请输入所需积分"
                            clearable
                            @input="regexpFunc"
                        ></el-input>
                    </div>
                </div>
                <div class="makeFoods_label">
                    <span class="makeFoods_label_tip">商品积分价值</span>
                    <div class="makeFoods_input">
                        <el-input 
                            v-model="productPointPrice"
                            placeholder="请输入商品积分价值"
                            clearable
                            @input="regexpFunc1"
                        ></el-input>
                    </div>
                </div>
                <div class="makeFoods_label">
                    <span class="makeFoods_label_tip">热销数量</span>
                    <div class="makeFoods_input">
                        <el-input 
                            v-model="mallHotNum"
                            placeholder="请输入热销数量"
                            clearable
                            @input="regexpFunc2"
                        ></el-input>
                    </div>
                </div>
                <div class="makeFoods_label">
                    <span class="makeFoods_label_tip">商品单位</span>
                    <div class="makeFoods_input">
                        <el-input 
                            v-model="mallGoodsDes"
                            placeholder="请输入商品单位"
                            clearable
                        ></el-input>
                    </div>
                </div>
                <div class="makeFoods_label">
                    <span class="makeFoods_label_tip">包装单位</span>
                    <div class="makeFoods_input">
                        <el-input 
                            v-model="productPackageUnit"
                            placeholder="请输入商品包装单位 如:6瓶/盒"
                            clearable
                        ></el-input>
                    </div>
                </div>
                <!-- 兑换规则 -->
                <div class="mall_rules_label"></div>
                <!-- <div v-for="(item,index) in exchangeRules" :key="'rule'+index" class="makeFoods_label">
                    <span class="makeFoods_label_tip">兑换规则</span>
                    <div class="makeFoods_input">
                        <el-input 
                            v-model="item.rules"
                            placeholder="请输入兑换规则"
                            clearable
                        ></el-input>
                    </div>
                    <i @click="delExchangeRules(index)" v-show="item.iconFlag" class="el-icon-delete add_foods_del"></i>
                    <i v-show="!item.iconFlag" class="add_foods_del add_foods_del_station"></i>
                </div>
                <div class="makeFoods_label_add">
                    <i @click="addExchangeRules" class="el-icon-circle-plus-outline add_foods_icon"></i>
                </div> -->
                <!-- 上传图片墙 -->
                <!-- :on-preview="handlePictureCardPreview" -->
                <div class="makeFoods_label">
                    <span class="makeFoods_label_tip">商品图片</span>
                    <div class="makeFoods_input">
                        <el-upload
                            :action="$commonFunc.imageAPI()"
                            list-type="picture-card"
                            :on-remove="handleRemove"
                            :on-success="handleAvatarSuccess"
                            :file-list="imageList"
                        >
                            <i class="el-icon-plus"></i>
                        </el-upload>
                        <el-dialog :visible.sync="mallImageVisible">
                            <img width="100%" :src="dialogImageUrl" alt="">
                        </el-dialog>
                    </div>
                </div>
                
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addMallConfirm">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { Toast } from 'vant';
export default {
	components: {
	
	},
	data(){
		return {
            itemDate:{},
            totalNum:0,
            mallId:'',//主键
            tableData: [],//列表数据
            currentPage:1,//默认分页
            dialogVisible:false,//dialog flag
            mallName:'',//商品名称
            mallDes:'',//商品描述
            mallIntegral:'',//兑换商品所需积分
            productPointPrice:'',//商品积分价值
            mallHotNum:'',//热销数量
            mallGoodsDes:'',//商品规格
            productPackageUnit:'',//包装单位
            dialogImageUrl: '',//上传图片墙
            mallImageVisible: false,//上传图片墙
            exchangeRules:[{//兑换规则
                rules:'',//兑换规则
                iconFlag:false,//删除按钮显隐
            }],
            imageList:[//图片数据
                // {
                //     name:'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg',
                //     url:'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
                // }
            ],
            productPictureAddress:[],
		}
    },
    mounted(){

        this.getExchangeMallDate(0);
    },
    methods:{
        // this.$router.push('/GDPLHasReturned');
        
        addMall(){
            this.mallId = '';
            this.itemDate = {};
            this.dialogVisible = true;
        },
        editRow(index, item) {
            // rows.splice(index, 1);
            console.log('index',index);
            console.log('rows',item);
            this.mallId = item.id;
            this.itemDate = item;

            this.mallName = item.productName;//商品名称
            this.mallDes = item.productDescription ;//商品描述
            this.mallIntegral = item.productPrice ;//兑换商品所需积分
            this.productPointPrice = item.productPointPrice ;//商品积分价值
            this.mallHotNum = item.productSoldNumer ;//热销数量
            this.mallGoodsDes = item.productUnit ;//商品单位
            this.productPackageUnit = item.productPackageUnit ;//商品单位

            var picData = JSON.parse(item.productPictureAddress.replace(/%2%/g,'"'));
            for(var i = 0;i < picData.length;i ++){
                this.imageList.push(
                    {
                        name:this.$commonFunc.checkThePic(picData[i]),
                        url:this.$commonFunc.checkThePic(picData[i])
                    }
                );

                this.productPictureAddress.push(picData[i]);

            }
            // this.dialogImageUrl: = item. ;//上传图片墙
            // this.exchangeRules:[{//兑换规则
            //     rules:'',//兑换规则
            //     iconFlag:false,//删除按钮显隐
            // }],




            this.dialogVisible = true;
        },
        deleteRow(index, item) {
            this.itemDate = item;
            this.mallId = item.id;

            this.$confirm('确定要删除这一商品？', '', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                // type: 'warning'
            }).then(() => {
                // this.$message({
                //     type: 'success',
                //     message: '删除成功!'
                // });
                this.saveOrUpdateMall('Y');
            }).catch(() => {
                // this.$message({
                //     type: 'info',
                //     message: '已取消删除'
                // });          
            });
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.getExchangeMallDate(Number(val - 1));
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.getExchangeMallDate(Number(val - 1));
        },
        addMallConfirm(){//添加确认按钮
            // this.$message({
            //     type: 'success',
            //     message: '确认添加!'
            // });
            this.saveOrUpdateMall('N');
        },
        handleRemove(file, fileList) {//上传图片墙
            console.log('this.dialogImageUrl',file)
            console.log('this.dialogImageUrl',fileList)
            if(file.response){
                this.productPictureAddress.splice(
                    Number(this.productPictureAddress.indexOf(file.response.data.filePath) - 1),1
                );
            }else{
                // var reg = new RegExp("https://www.xiaoqinshou.club//app/manage/attachment/getImageAllPath?path=");
                // this.productPictureAddress.splice(
                //     Number(this.productPictureAddress.indexOf(file.url.replace(reg,'')) - 1),1
                // );
                for(var i = 0;i < this.productPictureAddress.length;i ++){
                    if(this.$commonFunc.checkThePic(this.productPictureAddress[i]) == file.url){
                        this.productPictureAddress.splice(i,1);
                    }
                }
            }
            // this.productPictureAddress.push();
        },
        handlePictureCardPreview(file) {//上传图片墙
            this.dialogImageUrl = file.url;
            this.mallImageVisible = true;
        },
        handleAvatarSuccess(response, file, fileList) {
            var _this = this;
            this.$commonFunc.limitImgWidth(this,file,{
                width:750,height:600
            },function(url){
                if(url !== ''){
                    _this.productPictureAddress.push(url);
                }
            });
            // this.productPictureAddress.push(response.data.filePath)
        },
        addExchangeRules(){//添加兑换规则
            this.exchangeRules.push({
                rules:'',//配餐流程
                iconFlag:true,//删除按钮显隐
            });
        },
        delExchangeRules(index){//删除兑换规则
            this.exchangeRules.splice(index,1);
        },

        getExchangeMallDate(page){//积分商城的查询
            this.$fetch("pointProductList/findlist",{
                page:page ? page.toString() : '0',//第几页
                Size:'10',//每页大小
                isDeleted:'N',//查找未删除的数据
                // recipeType:'',//食谱类型
                // Sort:'',//排序字段,方式
                // officialAccounts:'',//关联的公众号
            }).then(res=>{
                console.log(res)
                this.totalNum = res.total;
                this.tableData.splice(0);
                for(var i = 0;i < res.rows.length;i ++){
                    this.tableData.push(
                        {
                            id:res.rows[i].id || '',//主键
                            productName:res.rows[i].productName || '',//商品名称
                            // publicIcon:'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg',//公众号图标
                            // webUrl:'',//资讯iteweb关联地址
                            productPictureAddress: res.rows[i].productPictureAddress || '',//商品图片地址
                            srcList: [//预览图片，可多个 - 自加
                                res.rows[i].productPictureAddress || ''
                            ],
                            productPrice: res.rows[i].productPrice || '',//商品价格
                            productPointPrice: res.rows[i].productPointPrice || '',//商品积分价值
                            productUnit: res.rows[i].productUnit || '',//商品单位
                            productDescription: res.rows[i].productDescription || '',//商品简介
                            productSoldNumer: res.rows[i].productSoldNumer || '',//商品售卖数量
                            productPackageUnit: res.rows[i].productPackageUnit || '',//商品包装单位
                            isDeleted: res.rows[i].isDeleted || '',//是否删除
                        }
                    );

                }

                this.dialogVisible = false;
            })
        },

        saveOrUpdateMall(isDeleted){//积分商城增加和更新
            var _data = null;
            if(isDeleted == 'Y'){
                _data = {
                    id:this.itemDate.id || '',//主键
                    productName:'',//商品名称
                    productDescription:'',//商品简介
                    productPrice:'',//商品价格
                    productPointPrice:'',//商品积分价值
                    productPictureAddress:'',//商品图片地址
                    productSoldNumer:'',//商品售卖数量
                    productUnit: '',//商品单位
                    productPackageUnit:'',//商品包装单位
                    isDeleted:isDeleted || 'N',//是否删除
                    // userId:sessionStorage.getItem("userId"),
                }
            }else{
                _data = {
                    id:this.itemDate.id || '',//主键
                    productName:this.mallName || '',//商品名称
                    productDescription:this.mallDes || '',//商品简介
                    productPrice:this.mallIntegral || '',//商品价格
                    productPointPrice:this.productPointPrice || '',//商品积分价值
                    productPictureAddress:JSON.stringify(this.productPictureAddress).replace(/["]/g,'%2%') || '',//商品图片地址
                    productSoldNumer:this.mallHotNum || '',//商品售卖数量
                    productUnit:this.mallGoodsDes || '',//商品单位
                    productPackageUnit:this.productPackageUnit || '',//商品包装单位
                    isDeleted:isDeleted || 'N',//是否删除
                    // userId:sessionStorage.getItem("userId"),
                }
            }
            this.$post("pointProductList/save",_data).then(res=>{
                console.log(res)
                this.getExchangeMallDate(0);
            })
        },
        regexpFunc(val){
            var patt1= /[^\d]/g;
            if(patt1.test(val)){
                Toast('只能输入数字哦');
                this.mallIntegral = '';
            }
        },
        regexpFunc1(val){
            var patt1= /[^\d]/g;
            if(patt1.test(val)){
                Toast('只能输入数字哦');
                this.productPointPrice = '';
            }
        },
        regexpFunc2(val){
            var patt1= /[^\d]/g;
            if(patt1.test(val)){
                Toast('只能输入数字哦');
                this.mallHotNum = '';
            }
        },
    },
    watch:{
        dialogVisible(newName,oldName){
            if(!newName){
                this.mallName = '';//商品名称
                this.mallDes = '' ;//商品描述
                this.mallIntegral = '' ;//兑换商品所需积分
                this.productPointPrice = '' ;//商品积分价值
                this.mallHotNum = '' ;//热销数量
                this.mallGoodsDes = '' ;//商品单位
                this.productPackageUnit = '' ;//包装单位
                this.imageList = [] ;//照片墙
                this.productPictureAddress = [];//照片墙入参
            }
        }
    }
}
</script>

